<template>
    <div class="page">
        <!-- 播放器 -->
        <div class="player" ref="playerContain">
            <div class="tools">
                <i class="left fa fa-chevron-left" @click="onGoHome"></i>
                <i class="right fa fa-upload"></i>
            </div>
            <div class="video">
                <video :src="currentVideoUrl" ref="player" @click.stop="onPlay"></video>
                <div class="btn" v-show="isPause" @click.stop="onPlay">
                    <i :class="['play fa', isPause ? 'fa-play-circle' : 'fa-pause-circle']"></i>
                </div>
            </div>
        </div>
        <div class="content-box" :style="{ marginTop: vidHeight + 'px' }">
            <div class="content">
                <!-- 电影内容 -->
                <div class="movie-card">
                    <div class="body">
                        <h3 class="name">{{ currentVideo.name }}</h3>
                        <p class="info">片中职务：导演/编剧</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-angle-right detail"></i>
                    </div>
                </div>

                <!-- 推荐列表 -->
                <div class="interest">
                    <template v-for="cate in interestData" :key="cate.name">
                        <h3 class="title">{{ cate.name }}</h3>
                        <div class="list-row">
                            <div class="list" :style="{ width: (200 + 5) * cate.data.length + 'px' }">
                                <!-- 电影列表 -->
                                <div
                                    v-for="mv in cate.data"
                                    class="category-card"
                                    :style="{ backgroundImage: 'url(' + mv.url + ')' }"
                                    @click="goToPlayer(mv.id)"
                                >
                                    <div class="info">
                                        <span>{{ cate.name }}</span>/
                                        <span>{{ mv.length }}</span>
                                    </div>
                                    <div class="name">
                                        <span>{{ mv.name }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>

        <div class="msg-box">
            <div class="input-box">
                <label class="fa fa-pencil-square-o"></label>
                <input type="text" placeholder="发表评论..."/>
            </div>
            <div>
                <div class="fa fa-heart-o"></div>
                <div class="count">22</div>
            </div>
            <div>
                <div class="fa fa-upload"></div>
                <div class="count">11</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';

const playerContain = ref<HTMLElement | null>(null);
const player = ref<HTMLVideoElement | null>(null);
const isPause = ref(true);
const vidHeight = ref(0);
const router = useRouter();
const route = useRoute();

const videos = [
  { id: 1, name: "搞笑影片", url: "../assets/video/funny.mp4", imageUrl: "src/assets/img/pic01.jpg" },
  { id: 2, name: "励志影片", url: "../assets/video/inspirational.mp4", imageUrl: "src/assets/img/pic02.jpg" },
];

const interestData = [
    {
        name: "励志",
        data: [
            { id: 1, name: "梦想起航", url: 'src/assets/img/pic02.jpg', length: `2'43"` },
        ]
    }
];

const currentVideoId = parseInt(route.params.id as string, 10);
const currentVideo = videos.find(video => video.id === currentVideoId) || videos[0];
const currentVideoUrl = currentVideo.url;

const onChangeSize = () => {
    if (player.value) vidHeight.value = player.value.clientHeight;
};

const onPlay = () => {
    if (player.value) {
        if (player.value.paused) {
            player.value.play();
            isPause.value = false;
        } else {
            player.value.pause();
            isPause.value = true;
        }
    }
};

const onGoHome = () => router.push({ path: "/" });
const goToPlayer = (videoId: number) => router.push({ name: 'Player', params: { id: videoId } });

onMounted(() => {
    window.addEventListener("resize", onChangeSize);
    onChangeSize();
});

onBeforeUnmount(() => window.removeEventListener("resize", onChangeSize));
</script>

<style>
/* 页面整体样式 */
.page {
    position: relative;
    min-height: 100vh;
}

/* 播放器样式 */
.player {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
}

.player .tools {
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}

.player .tools i {
    text-shadow: 2px 1px 7px grey;
    color: rgba(255, 255, 255, 0.438);
    padding: 15px;
    font-size: 22px;
}

.player .tools i:hover {
    color: white;
}

.player .tools .left {
    float: left;
}

.player .tools .right {
    float: right;
}

.player .video {
    height: 100%;
    position: relative;
}

.player .video video {
    width: 100%;
    max-height: 200px;
    background: black;
}

.player .video .btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.player .video .btn .play {
    border-radius: 50%;
    color: white;
    font-size: 68px;
    opacity: 0.6;
}

.player .video:hover .btn .play {
    opacity: 1;
}

.player .video .btn:hover .play {
    opacity: 0.5;
}

/* 内容区域样式 */
.content-box {
    margin-bottom: 50px;
    padding-top: 200px; /* 预留播放器高度 */
}

.content-box .content {
    overflow: hidden;
    padding: 0 10px;
}

.content-box .content .movie-card {
    padding: 5px 16px;
    position: relative;
    margin: 5px 5px;
    border-bottom: 1px solid #f4f4f4;
}

.content-box .content .movie-card .icon {
    top: 44%;
    position: absolute;
    right: 15px;
}

.content-box .content .movie-card i.detail {
    font-size: 22px;
}

.content-box .content .interest {
    text-align: left;
}

.content-box .content .interest .list-row {
    width: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
}

.content-box .content .interest .list {
    display: flex;
}

.content-box .content .interest .category-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background-color: rgb(0, 0, 0);
    height: 100px;
    width: 200px;
    margin-right: 5px;
    padding-left: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    background-size: cover;
    color: white;
}

.content-box .content .interest .category-card .info {
    font-size: 14px;
}

.content-box .content .interest .category-card .name {
    font-size: 16px;
}

/* 消息栏样式 */
.msg-box {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    box-shadow: 3px 5px 20px #a6a6a6;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 0px;
    background-color: white;
}

.msg-box .input-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid gray;
    border-radius: 18px;
    padding: 0px 15px;
    font-size: 18px;
    height: 28px;
}

.msg-box .input-box input {
    border: none;
    font-size: 18px;
    padding-left: 5px;
    outline: none;
}

.msg-box div {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
}
</style>